import React from 'react';
import {render} from 'react-dom';
import {Router, Route, IndexRoute} from 'react-router';
import moment from 'moment';

import View from 'lib/View.jsx';

import Layout from '../common/layout.jsx';
import history from '../common/history.es6';

import RootView from './RootView.jsx';
import UserSerializationView from './Serialization/UserSerializationView.jsx';
import UserSequenceView from './Serialization/UserSequenceView.jsx';

require('./style.less');

class MainView extends View {
  constructor(props, context) {
    super(props, context);

    this.releaseDate = moment('2016-02-25');
  } // constructor

  renderNotReady() {
    return (
      <div className="box">
        <div className="default-error" style={{
          height: '600px',
          lineHeight: '600px',
          fontSize: '18px',
          backgroundColor: 'rgba(51, 51, 51, 0.25)',
          borderRadius: '3px'
        }}>
          当前应用尚未准备！
        </div>
      </div>
    );
  } // renderNotReady

  render(){
    let subTitle = '行为事件分析' + (moment().valueOf() > this.releaseDate.add(60, 'days').valueOf() ? '' : '（Beta）');

    return (
      <Layout title="事件分析" subtitle={ subTitle } hideVersion={ true } hideTime={ true }>
        { BlueWare.sensorsProjectReady ? this.props.children : this.renderNotReady() }
      </Layout>
    );
  } // render
}

render((
  <Router history={ history }>
    <Route path="/" component={ MainView }>
      <IndexRoute component={ RootView }/>
      <Route path="/users" component={ UserSerializationView } />
      <Route path="/users/sequence/:uid" component={ UserSequenceView } />
    </Route>
  </Router>
), document.getElementById('root'));
